<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="icon" href="../img/juejinlogo.svg">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../fontawesome/css/all.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/userMes.css">
    <script src="../js/userMes.js"></script>
    <script src="https://unpkg.com//axios@0.27.2/dist/axios.min.js"></script>
    <script src="../js/header.js"></script>


</head>

<body>
    <!-- 最顶部导航栏 -->
    <div class="headerContainer">
        <header>
            <div class="leftPart">
                <!-- 稀土掘金的图标 -->
                <div class="logo">
                    <img src="../img/logo.svg" alt="">
                </div>

                <!-- 目录 -->
                <ul class="headerTitle">
                    <li>首页</li>
                    <li>沸点</li>
                    <li>课程</li>
                    <li>直播</li>
                    <li>活动</li>
                    <li>商城</li>
                    <li>APP</li>
                    <li>插件</li>
                </ul>
            </div>

            <div class="rightPart">
                <!-- 搜索框 -->
                <div class="searchContainer">
                    <!-- 搜索框 -->
                    <input id="searchBox" type="text" placeholder="探索稀土掘金">
                    <!-- 展示的下拉列表 -->
                    <ul class="listBox" id="listBox"></ul>
                    <!-- 查询图标 -->
                    <div class="searchIcon">
                        <div class="fas fa-search"></div>
                    </div>
                </div>

                <!-- 创作者中心 -->
                <div class="createCenter">
                    <p>创作者中心</p>
                    <div class="more"></div>
                </div>

                <!-- 会员 -->
                <div class="vip">
                    <img src="../img/vip.svg" alt="">
                    <p>会员</p>
                </div>

                <!-- 用户已登录 -->
                <div class="userIn">
                    <div class="fas fa-bell"></div>
                    <div class="userPhoto">
                        <img id="avatar" alt="">
                    </div>
                    <!-- 隐藏的功能菜单 -->
                    <div class="hiddenFun">
                        <ul class="funList">
                            <li class="goNotes">
                                <img src="../img/写文章.png" alt="">
                                <p>写文章</p>
                            </li>
                            <li>
                                <img src="../img/草稿箱.png" alt="">
                                <p>草稿箱</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="goUserMes">
                                <img src="../img/我的主页.png" alt="">
                                <p>我的主页</p>
                            </li>
                            <li>
                                <img src="../img/我赞过的.png" alt="">
                                <p>我赞过的</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的课程.png" alt="">
                                <p>我的课程</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的优惠劵.png" alt="">
                                <p>我的优惠劵</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/掘金会员.png" alt="">
                                <p>掘金会员</p>
                            </li>
                            <li>
                                <img src="../img/我的收藏.png" alt="">
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <img src="../img/成长福利.png" alt="">
                                <p>成长福利</p>
                            </li>
                            <li>
                                <img src="../img/标签管理.png" alt="">
                                <p>标签管理</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/浏览记录.png" alt="">
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <img src="../img/我的报名.png" alt="">
                                <p>我的报名</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li>
                                <img src="../img/设置.png" alt="">
                                <p>设置</p>
                            </li>
                            <li>
                                <img src="../img/关于.png" alt="">
                                <p>关于</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="exit">
                                <img src="../img/退出.png" alt="">
                                <p>退出</p>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 用户未登录 -->
                <button class="userOut">登录</button>

                <!-- 登录界面 -->
                <div class="loginBlock">
                    <!-- 遮罩层 -->
                    <div class="overlay">
                        <!-- 登录注册块 -->
                        <div class="loginBox">
                            <!-- 选择功能 -->
                            <div class="funSelect">
                                <div class="loginFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>登录</p>
                                </div>
                                <div class="registerFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>注册</p>
                                </div>
                            </div>

                            <!-- 关闭 -->
                            <div class="close">
                                <div class="fas fa-times"></div>
                            </div>

                            <!-- 不同输入状态时显示不同的图片 -->
                            <div class="inputState">
                                <img src="../img/openEye.svg" alt="">
                            </div>

                            <!-- 不同身份时选择登录或者注册的界面 -->
                            <ul class="interface">
                                <!-- 登录界面 -->
                                <li class="login">
                                    <form class="type" id="login" action="">
                                        <input class="userName" id="loginName" type="text" autocomplete="off"
                                            placeholder="请输入您的用户名">
                                        <input class="userPassword" id="loginPassword" type="password"
                                            autocomplete="off" placeholder="请输入您的密码">
                                        <input class="userBtn" id="loginBtn" type="button" autocomplete="off"
                                            value="登录">
                                        <div class="otherFunc">
                                            <p>没有账号？<span class="go">去注册</span></p>
                                            <div class="checkbox">
                                                <input type="checkbox" autocomplete="off">
                                                <p>记住我</p>
                                                <div class="fas fa-question-circle"></div>
                                                <span class="loginFree">七天免登录</span>
                                            </div>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 普通用户的注册界面 -->
                                <li class="register">
                                    <form class="type" id="register" action="">
                                        <input class="userName" id="registerName" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn" type="button" autocomplete="off"
                                            value="普通用户注册">
                                        <div class="otherFunc">
                                            <p>已有账号？<span class="go">去登录</span></p>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 管理员注册界面 -->
                                <li id="hidden">
                                    <form class="type" id="register0" action="">
                                        <input class="userName" id="registerName0" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword0" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn0" type="button" autocomplete="off"
                                            value="管理员注册">
                                    </form>
                                </li>
                            </ul>

                            <!-- 管理员注册的隐藏按钮 -->
                            <div class="hiddenDot"></div>

                            <!-- 消息提示 -->
                            <ul class="message">
                                <li>登录成功！稀土掘金欢迎您！</li>
                                <li>登录失败！请重新输入用户名和密码！</li>
                                <li>注册成功！请返回登录页登录！</li>
                                <li>注册失败！用户名已存在！</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </header>
    </div>

    <div class="main">
        <!-- 左侧部分 -->
        <div class="leftSection">

            <!-- 用户信息介绍 -->
            <ul class="intro">
                <!-- 用户头像 -->
                <li class="userAvatar">
                    <img id="userAvatar" alt="">
                </li>
                <!-- 用户名 -->
                <li class="userName">
                    <div id="name"></div>
                    <div>+ 你从事什么职业？</div>
                    <div>+ 你的信仰是什么？</div>
                </li>
                <!-- 编辑个人资料 -->
                <li>
                    <div class="icon">
                        <div class="fab fa-weibo"></div>
                        <div class="fab fa-github"></div>
                        <div class="fas fa-user-circle"></div>
                    </div>
                    <div class="changeMes">
                        编辑个人资料
                    </div>
                </li>
            </ul>

            <!-- 获得徽章 -->
            <div class="badge">
                <div>
                    <img src="../img/badge.png" alt="">
                    <span>获得徽章 0</span>
                </div>
                <img src="../img/right-arrow.svg" alt="">
            </div>

            <!-- 用户功能 -->
            <div class="function">
                <ul class="functionSelect">
                    <li class="blueBlock">动态</li>
                    <li>文章</li>
                    <li>专栏</li>
                    <li>沸点</li>
                    <li>收藏集</li>
                    <li>关注</li>
                    <li>赞</li>
                    <li>
                        <img src="../img/search.svg" alt="">
                    </li>
                </ul>

                <ul class="functionInner">
                    <li class="func">动态</li>

                    <!-- 文章部分 -->
                    <li class="func">
                        <ul id="userPassageList">
                            <!-- 每篇文章一个li节点 -->
                            <li class="passageListLi userPassageListLi">
                                <!-- 顶部作者和文章分类 -->
                                <div class="topBar">
                                    <div class="writerName"></div>
                                    <p>&nbsp; | &nbsp;</p>
                                    <div class="formerTime">9月前</div>
                                    <p>&nbsp; | &nbsp;</p>
                                    <div class="category"></div>
                                </div>

                                <!-- 中间部分 -->
                                <div class="middleContainer">
                                    <!-- 标题、简介和封面 -->
                                    <div class="passageInner">
                                        <div class="passageTitle"></div>
                                        <div class="passageBrief"></div>
                                        <ul class="passageAction">
                                            <li>
                                                <img class="icon" src="../img/icon-watch.png" alt="">
                                                <div class="watchCount"></div>
                                            </li>
                                            <li class="likeBtn">
                                                <img class="icon" id="likeImg" src="../img/icon-like.png" alt="">
                                                <div class="likeCount"></div>
                                            </li>
                                            <li>
                                                <img class="icon" src="../img/icon-comment.png" alt="">
                                                <div class="commentCount"></div>
                                            </li>
                                            <li class="changeAndDelete">
                                                <p class="dot">. . .</p>
                                                <div>
                                                    <p class="changePassage">编辑</p>
                                                    <p class="deletePassage">删除</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 封面图片 -->
                                    <div class="passageCover">
                                        <img alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <li class="func">专栏</li>
                    <li class="func">沸点</li>
                    <li class="func">收藏集</li>
                    <li class="func">关注</li>

                    <!-- 点赞部分 -->
                    <li class="func">
                        <ul id="likePassageList">
                            <!-- 每篇文章一个li节点 -->
                            <li class="passageListLi likePassageListLi">
                                <!-- 顶部作者和文章分类 -->
                                <div class="topBar">
                                    <div class="writerName"></div>
                                    <p>&nbsp; | &nbsp;</p>
                                    <div class="formerTime">9月前</div>
                                    <p>&nbsp; | &nbsp;</p>
                                    <div class="category"></div>
                                </div>

                                <!-- 中间部分 -->
                                <div class="middleContainer">
                                    <!-- 标题、简介和封面 -->
                                    <div class="passageInner">
                                        <div class="passageTitle"></div>
                                        <div class="passageBrief"></div>
                                        <ul class="passageAction">
                                            <li>
                                                <img class="icon" src="../img/icon-watch.png" alt="">
                                                <div class="watchCount"></div>
                                            </li>
                                            <li class="likeBtn">
                                                <img class="icon" id="likeImg" src="../img/icon-like.png" alt="">
                                                <div class="likeCount"></div>
                                            </li>
                                            <li>
                                                <img class="icon" src="../img/icon-comment.png" alt="">
                                                <div class="commentCount"></div>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 封面图片 -->
                                    <div class="passageCover">
                                        <img alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <li class="func">
                        <img src="../img/left-arrow.png" alt="">
                        <span>搜索文章</span>
                        <input type="text" value="搜索 发布/点赞/收藏的文章">
                        <img src="../img/search-icon.svg" alt="">
                    </li>
                </ul>
            </div>
        </div>

        <!-- 右侧部分 -->
        <div class="rightSection">
            <!-- 关注 -->
            <div class="focus">
                <div>
                    <p>关注了</p>
                    <div class="num" id="concern"></div>
                </div>
                <div>
                    <p class="grayBlock">关注者</p>
                    <div class="num" id="likes"></div>
                </div>
            </div>

            <!-- 补充信息 -->
            <div class="else">
                <div>
                    <p>收藏集</p>
                    <div class="num" id="collectCount"></div>
                </div>
                <div>
                    <p>关注标签</p>
                    <div class="num" id="likeLabel">6</div>
                </div>
                <div>
                    <p>加入于</p>
                    <div class="num" id="createAt"></div>
                </div>
            </div>



        </div>
    </div>

</body>

</html>